<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }" @click="handleIndex"
			>首页</el-breadcrumb-item
		>
		<el-breadcrumb-item>{{ routeLabels }}</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script setup lang="ts">
import { useTabsStore } from "../store/tabs";
import { watchEffect } from "vue";
import { routes } from "../router/index";
const store = useTabsStore();
const handleIndex = () => {
	store.tabsIndex = "/";
};

function getLabelsByPaths(paths: any, routes: any) {
	let labels = "";
	paths.forEach((path: any) => {
		const matchedRoutes = routes.filter((route: any) => route.path === path);
		if (matchedRoutes.length > 0) {
			const routeLabels = matchedRoutes.map((route: any) => route.meta.label);
			labels += `${routeLabels.join("/")} / `;
		}
	});
	return labels.replace(/\/\s$/, "");
}

let routeLabels = "";

watchEffect(() => {
	const path = store.tabsIndex.split("/").filter((p) => p !== "");
	const arr = path.map((p, i) => `/${path.slice(0, i + 1).join("/")}`);
	routeLabels = getLabelsByPaths(arr, routes[0].children);
	console.log(routeLabels);
});
</script>

<style scoped></style>
